<template>
  <div className="container">
    <h1>maizuoDetail-ID - {{$route.params}} - {{server}}</h1>
    <h2>maizuoDetail-ID - {{filmInfo.name}}</h2>
    <hr>
<!--    <img :src="filmInfo.poster"/>-->

    <el-carousel indicator-position="outside" style="width: 500px">
      <el-carousel-item v-for="item in filmInfo.photos" :key="item">
        <img :src="item" width="500"/>
      </el-carousel-item>
    </el-carousel>

    <div>maizuoDetail-ID - {{filmInfo.synopsis}}</div>
  </div>
</template>
<script>
// import axios from 'axios'
export default {
  layout: 'defaultTemp',
  data() {
    return {
      server: process.server,
    }
  },
  asyncData (data) {
    return data.app.$axios({
      url:`https://m.maizuo.com/gateway?filmId=${data.params.id}&k=4771386`,
      method: 'get',
      headers:{
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16082999672528391412580353"}',
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res=>{
      return {
        filmInfo:res.data.data.film
      }
    })
  }
}
</script>
<style>
html {
  font-family: 'Source Sans Pro',
  -apple-system,
  BlinkMacSystemFont,
  'Segoe UI',
  Roboto,
  'Helvetica Neue',
  Arial,
  sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>
